<template>
  <div>
    <!-- 计算属性get 一个函数如果是计算属性，则使用时不需要()就能触发 -->
    <button @click="showThis">显示vue对象</button>
    <p>{{getTotal()}}</p>

    <!-- 总结：如果一个函数 需要自动触发 && 不需要传参，就可以制作成计算属性 -->
    <!-- 注意：事件绑定的函数不能是计算属性，因为是通过事件触发的 -->
    <p>{{getSum}}</p>
  </div>
</template>

<script>
  export default {
    methods: {
      getTotal() {
        return 10+20
      },
      showThis(){
        console.log(this);
      }
    },
// -----------------------------------------------------------
    // 放在这里的函数，会自动转换为 计算属性，使用时不需要()调用
    computed: {
      getSum() {
        return 10+20 
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>